<template>
<div class="main-header">
   <div class="title primary">
       {{title}}
   </div>
   <div class="nav-list">
       <ul class="d-flex">
           <li
            v-for="item in navList"
            :key="item.name"
            class="flexLi"
            :class="{'nav-active': isActive(item.path)}"
            @click="navClick(item.path)"
           >
           {{item.name}}
           </li>
       </ul>
   </div>
</div>
</template>

<script>
export default {
    props: {
        title: {
            type: String
        }
    },
    data() {
        return {
            navList: [
                {path: '/recommend', name: '推荐'},
                {path: '/singer', name: '歌手'},
                {path: '/rank', name: '排行'},
                {path: '/search', name: '搜索'},
            ]
        }
    },
    methods: {
        navClick(path) {
            this.$emit('nav-click', path);
        },
        isActive(path){
            if(path === this.$route.path){
                return true;
            }
            if(path === '/recommend' && this.$route.path === '/'){
                return true;
            }
            return false;
        }
    }
}
</script>
<style scoped lang="scss">
    .title{
        text-align: center;
        margin-top: 10px;
        font-size: 24px;
        font-weight: 600;
    }
    .flexLi{
        width: 25%;
        text-align: center;
        color: #000;
    }
</style>